<template>
  <div class="w-full max-w-6xl mx-auto p-6">
    <!-- 提示信息 -->
    <div
      class="bg-red-50 border-l-4 border-red-500 p-4 mb-6 rounded-md shadow-sm"
    >
      <div class="flex items-center">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6 text-red-500 mr-3"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
          />
        </svg>
        <p class="text-red-700 font-medium tracking-wide">
          点击'开始考试'后将自动进入考试，请诚信考试！
        </p>
      </div>
    </div>

    <!-- 考试信息卡片 -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
      <h2
        class="text-2xl font-bold text-gray-800 mb-6 pb-3 border-b border-gray-200"
      >
        考试信息
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <!-- 考试基本信息 -->
        <div
          class="bg-white p-4 rounded-lg shadow-sm flex flex-col justify-center h-full"
        >
          <div class="space-y-5">
            <div class="flex items-center">
              <span class="text-gray-600 font-medium w-24">考试名称:</span>
              <span class="text-gray-800 font-semibold">{{
                examData.title || '暂无'
              }}</span>
            </div>

            <div class="flex items-center">
              <span class="text-gray-600 font-medium w-24">考试时长:</span>
              <span class="text-gray-800 font-semibold">
                {{
                  examData.examDuration
                    ? examData.examDuration.toString() + ' 分钟'
                    : '暂无'
                }}
              </span>
            </div>

            <div class="flex items-center">
              <span class="text-gray-600 font-medium w-24">试卷总分:</span>
              <span class="text-gray-800 font-semibold">{{
                examData.grossScore || '0'
              }}</span>
            </div>

            <div class="flex items-center">
              <span class="text-gray-600 font-medium w-24">及格分数:</span>
              <span class="text-gray-800 font-semibold">{{
                examData.passedScore || '0'
              }}</span>
            </div>

            <div class="flex items-center">
              <span class="text-gray-600 font-medium w-24">发布人:</span>
              <span class="text-gray-800 font-semibold">{{
                examData.username || '未知'
              }}</span>
            </div>
          </div>
        </div>

        <!-- 题型信息 -->
        <div class="bg-gray-50 p-4 rounded-lg shadow-sm flex flex-col h-full">
          <h3 class="text-lg font-medium text-gray-700 mb-4">题目构成</h3>

          <div class="grid grid-cols-2 gap-4 flex-grow">
            <div
              class="bg-blue-100 rounded-lg flex items-center justify-center p-3"
            >
              <div class="text-center">
                <div class="text-3xl font-bold text-blue-600">
                  {{ examData.radioCount || '0' }}
                </div>
                <div class="text-sm text-blue-500 mt-1">单选题</div>
                <div class="text-xs text-blue-400 mt-1">
                  ({{ examData.radioScore || '0' }}分)
                </div>
              </div>
            </div>

            <div
              class="bg-green-100 rounded-lg flex items-center justify-center p-3"
            >
              <div class="text-center">
                <div class="text-3xl font-bold text-green-600">
                  {{ examData.multiCount || '0' }}
                </div>
                <div class="text-sm text-green-500 mt-1">多选题</div>
                <div class="text-xs text-green-400 mt-1">
                  ({{ examData.multiScore || '0' }}分)
                </div>
              </div>
            </div>

            <div
              class="bg-purple-100 rounded-lg flex items-center justify-center p-3"
            >
              <div class="text-center">
                <div class="text-3xl font-bold text-purple-600">
                  {{ examData.judgeCount || '0' }}
                </div>
                <div class="text-sm text-purple-500 mt-1">判断题</div>
                <div class="text-xs text-purple-400 mt-1">
                  ({{ examData.judgeScore || '0' }}分)
                </div>
              </div>
            </div>

            <div
              class="bg-amber-100 rounded-lg flex items-center justify-center p-3"
            >
              <div class="text-center">
                <div class="text-3xl font-bold text-amber-600">
                  {{ examData.saqCount || '0' }}
                </div>
                <div class="text-sm text-amber-500 mt-1">简答题</div>
                <div class="text-xs text-amber-400 mt-1">
                  ({{ examData.saqScore || '0' }}分)
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 按钮区域 -->
    <div class="flex justify-center">
      <button
        @click="startExam"
        class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full shadow-lg transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
      >
        <div class="flex items-center">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 mr-2"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
              clip-rule="evenodd"
            />
          </svg>
          开始考试
        </div>
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getExamDetail, examStart } from '@/api/user/exam'

const route = useRoute()
const router = useRouter()

// 响应式数据
const examId = ref('')
const examData = ref({
  title: '',
  examDuration: 0,
  grossScore: 0,
  passedScore: 0,
  username: '',
  radioCount: 0,
  radioScore: 0,
  multiCount: 0,
  multiScore: 0,
  judgeCount: 0,
  judgeScore: 0,
  saqCount: 0,
  saqScore: 0,
})

// 获取考试详情
const getExamDetails = async (id) => {
  try {
    const res = await getExamDetail(id)
    if (res.data) {
      examData.value = res.data
    }
  } catch (error) {
    console.error('获取考试详情失败:', error)
    ElMessage.error('获取考试详情失败')
  }
}

// 开始考试
const startExam = async () => {
  try {
    const res = await examStart(examId.value)
    console.log('开始考试API响应:', res)

    if (res.code) {
      console.log('准备跳转到考试页面，考试ID:', examId.value)
      // 存储考试ID
      localStorage.setItem('examId', examId.value)

      // 跳转到考试页面
      router
        .push({
          name: 'startExam',
          query: { examId: examId.value },
        })
        .then(() => {
          console.log('路由跳转成功')
        })
        .catch((err) => {
          console.error('路由跳转失败:', err)
        })
    } else {
      console.warn('API返回失败:', res.msg)
      ElMessage.info(res.msg || '开始考试失败')
    }
  } catch (error) {
    console.error('开始考试失败:', error)
    ElMessage.error('开始考试失败')
  }
}

// 组件挂载时获取考试详情
onMounted(() => {
  // 从localStorage获取考试ID
  examId.value = route.query.examId
  if (examId.value) {
    getExamDetails(examId.value)
  } else {
    ElMessage.warning('未找到考试信息')
  }
})
</script>
